import React, { useState, useContext } from "react";
import { View, StyleSheet, Dimensions, Text, TouchableOpacity } from "react-native";
import { Button, Input } from "@rneui/themed";
import CommonContext from "@/utils/createContext";

const { width, scale } = Dimensions.get('window')
const ratio = width * scale / 1080

const WhiteList = () => {

    const { handlePressBack } = useContext(CommonContext);
    const [whiteAddress, setWhiteAddress] = useState('');
    const [transferAddress, setTransferAddress] = useState('');

    const handlePressConfirm = () => { }

    const handlePressRemove = () => { }

    return (
        <View style={styles.container}>
            <View style={styles.bodyContent}>
                <Text style={{ ...styles.title, marginTop: 12 * ratio }}>White list address: </Text>
                <Input
                    containerStyle={styles.textInput1}
                    onChangeText={text => setWhiteAddress(text)}
                    value={whiteAddress}
                    inputContainerStyle={{ borderBottomWidth: 0 }}
                    inputStyle={styles.title}
                />
                <View style={{ alignItems: 'center' }}>
                    <Button buttonStyle={styles.button1} onPress={handlePressConfirm}>
                        <Text style={{ ...styles.title, color: '#FFFFFF' }}>Confirm Add</Text>
                    </Button>
                    <Button buttonStyle={styles.button2} onPress={handlePressBack}>
                        <Text style={styles.title}>Cancel</Text>
                    </Button>
                </View>
                <Text style={{ ...styles.title, marginTop: 35 * ratio }}>Target transfer address: </Text>
                <View style={styles.transferContent}>
                    <Input
                        containerStyle={styles.textInput2}
                        onChangeText={text => setTransferAddress(text)}
                        value={transferAddress}
                        inputContainerStyle={{ borderBottomWidth: 0 }}
                        inputStyle={styles.title}
                    />
                    <View style={styles.divider}></View>
                    <TouchableOpacity onPress={handlePressRemove}>
                        <Text style={{ ...styles.title, color: '#707070', marginLeft: 8 * ratio }}>Remove</Text>
                    </TouchableOpacity>
                </View>
            </View>
        </View>
    )
}

const styles = StyleSheet.create({
    container: {
        flex: 1,
        alignItems: 'center'
    },
    bodyContent: {
        width: 260 * ratio,
        height: '100%'
    },
    transferContent: {
        width: 260 * ratio,
        height: 60 * ratio,
        backgroundColor: '#FFFFFF',
        borderRadius: 5,
        marginTop: 10 * ratio,
        flexDirection: 'row',
        alignItems: 'center'
    },
    textInput1: {
        width: 260 * ratio,
        height: 60 * ratio,
        backgroundColor: '#FFFFFF',
        borderWidth: 1,
        borderColor: '#E7E7E7',
        borderRadius: 4,
        marginTop: 6 * ratio
    },
    textInput2: {
        width: 200 * ratio,
        height: 60 * ratio
    },
    divider: {
        width: 0 * ratio,
        height: 31 * ratio,
        borderWidth: 1,
        borderColor: '#898989',
    },
    title: {
        fontSize: 10,
        fontFamily: 'Microsoft YaHei',
        fontWeight: '400',
        color: '#2A2A2A',
        lineHeight: 13
    },
    button1: {
        width: 239 * ratio,
        height: 35 * ratio,
        backgroundColor: '#5A72EC',
        borderRadius: 3,
        marginTop: 21 * ratio
    },
    button2: {
        width: 239 * ratio,
        height: 35 * ratio,
        backgroundColor: '#FFFFFF',
        borderRadius: 3,
        marginTop: 11 * ratio
    }
})
export default WhiteList